<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType, Ref } from 'vue'

// props
const props = defineProps({
  formRef: {
    type: Function as PropType<(el: any) => void>
  },
  modelValue: {
    type: Object as PropType<Record<string, any>>,
    default: () => {}
  },
  useFor: {
    type: String,
    default: 'add' // add edit display
  }
})

const emit = defineEmits<{
  (e: 'update:modelValue', model: any): void
}>()

const model: Ref<Record<string, any>> = ref(props.modelValue)

watch(model, (v, ov) => {
  emit('update:modelValue', v)
})
</script>

<template>
  <el-form :ref="formRef" :model="model">
    <el-form-item
      label="部门名称"
      prop="name"
      label-width="110px"
      :rules="{
        required: true,
        message: '请输入部门名称',
        trigger: 'blur'
      }"
    >
      <el-input
        v-model="model.name"
        :disabled="useFor == 'display'"
        placeholder="请输入部门名称"
      ></el-input>
    </el-form-item>

    <el-form-item
      label="部门代码"
      prop="code"
      label-width="110px"
      :rules="{
        required: true,
        message: '请输入部门代码',
        trigger: 'blur'
      }"
    >
      <el-input
        v-model="model.code"
        :disabled="useFor != 'add'"
        placeholder="请输入部门代码"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
